<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="900" height="400" style="background-color: antiquewhite"></canvas>
</body>
<script>
    //1.获取canvas元素
    var canvas = document.getElementById("canvas")
    //2.获取CanvasRenderingContext2D实例对象，利用该对象提供的方法进行图形的绘制
    var context = canvas.getContext("2d")
    //     console.log(context);
    //     context.fillStyle = "pink"
    //   context.fillRect(10,10,800,400);

    // context.moveTo(0,0)

    // context.lineTo(200,100)

    // context.stroke()

    // context.beginPath()

    // context.arc(50,50,40,0,7)

    // context.stroke()

    // context.font = "40px Arial"

    // context.strokeText("hello world",20,30)
    
    // var myColor = context.createLinearGradient(0,0,10)

    // myColor.addColorStop(0,'teal')
    // myColor.addColorStop(0.5,'pink')
    // myColor.addColorStop(1,'#fff')

    // context.fillStyle = myColor

    // context.fillRect(0,0,500,100)

    var img = new Image();

    img.src = '../../1-html&css/day02/响应报文.png'

    img.onload = function(){
        context.drawImage(img,10,10,800,800)
    }
</script>
</html>